<template>
	<view>
		<!-- 遮罩层 -->
		<view v-show="popupMask" class="popup-mask" @touchmove.stop.prevent=""></view>
		<view v-if="popup" class="notice">
			<view class="revocationTitle">申请须知</view>
			<view class="noticeContent">
				<rich-text :nodes="askShouldMsg"></rich-text>
			</view>
			<view class="mask-btns">
				<view class="mask-close" @click="hide()">取消</view>
				<view class="mask-true" @click="skip()">确定申请</view>
			</view>
			<slot></slot>
		</view>
		<view v-if="codeImg" class="codeImgBox">
			<view class="flex codeMessage">
				<image :src="content.img" class="codeWX" show-menu-by-longpress="true" v-if="content.type==0"
					@click="previewImage"></image>
				<image v-else :src="content.img" class="stateImg statusImg"></image>
				<view>{{content.Text}}</view>
			</view>
			<image src="../static/index/close.png" class="codeClose" @click="hide"></image>
			<slot></slot>
		</view>
		<view v-if="subSuccess" class="subSuccessBox">
			<image :src="type==1?require('../static/index/success.png'):require('../static/index/mistake.png')"
				class="stateImg"></image>
			<view>提交{{type==1?'成功':'失败'}}</view>
			<slot></slot>
		</view>
		<view v-if="screen" class="screenBox">
			<view class="screenTitle" style="padding-top:40rpx;">综合排序</view>
			<view class="flex sceenList">
				<view class="iconBox" :class="obj.sortType=='DEF'?'iconBoxAfter':''" @click="radioSingle('DEF')">综合排序
				</view>
				<view class="iconBox" :class="obj.sortType=='DISTANCE'?'iconBoxAfter':''"
					@click="radioSingle('DISTANCE')">距离排序</view>
				<view class="iconBox" :class="obj.sortType=='REBATE'?'iconBoxAfter':''" @click="radioSingle('REBATE')">
					返利高低</view>
			</view>
			<view class="screenTitle">品类</view>
			<view class="flex sceenList">
				<view class="iconBox" :class="item.pick==true?'iconBoxAfter':''" v-for="(item,index) in list"
					@click="classClick(item)">{{item.title}}</view>
			</view>
			<view class="screenTitle">是否评价</view>
			<view class="flex sceenList">
				<view class="iconBox" :class="obj.evaluate=='Y'?'iconBoxAfter':''" @click="evaluateClick('Y')">需要评价
				</view>
				<view class="iconBox" :class="obj.evaluate=='N'?'iconBoxAfter':''" @click="evaluateClick('N')">无需评价
				</view>
			</view>
			<view class="flex sceenBtns">
				<view class="sceenBtn" @click="hide">取消</view>
				<view class="sceenBtn sceenBtnAfter" @click="quit">确定</view>
			</view>
		</view>
	</view>
</template>
<script>
	let that
	import {
		loadDiceByCode
	} from '../common/api.js'
	export default {
		name: 'alert',
		props: {
			popupMask: {
				type: Boolean,
				default: false
			},
			popup: {
				type: Boolean,
				default: false
			},
			codeImg: {
				type: Boolean,
				default: false
			},
			screen: {
				type: Boolean,
				default: false
			},
			subSuccess: {
				type: Boolean,
				default: false
			},
			type: {
				type: Number,
				default: 0
			},
			content: {
				type: Object,
			},
			askShouldMsg: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				list: [],
				obj: {
					sortType: '',
					evaluate: '',
					shopKate: []
				}
			}
		},
		onLoad(option) {
			that = this
		},
		onShow() {},
		methods: {
			quit() {
				this.obj.shopKate = this.list.filter(V => V.pick)
				this.$emit('sub', this.obj)
			},
			classClick(item) {
				item.pick = !item.pick
				this.$forceUpdate()
			},
			evaluateClick(type) {
				if (this.obj.evaluate == type) {
					this.obj.evaluate = ''
				} else {
					this.obj.evaluate = type
				}
			},
			radioSingle(type) {
				if (this.obj.sortType == type) {
					this.obj.sortType = ''
				} else {
					this.obj.sortType = type
				}
			},
			loadDiceByCode() {
				loadDiceByCode({
					dictCode: 'shop_kate'
				}).then(res => {
					this.list = res.result.reverse()
					this.list.map(V => {
						V.pick = false
					})
				})
			},
			previewImage() {
				// 预览图片
				uni.previewImage({
					urls: [this.content.img],
					showmenu: true,
				});
			},
			hide() {
				this.$emit('close')
			},
			skip() {
				let data = {}
				this.$emit('sub', data)
			}
		}
	}
</script>
<style scoped lang="scss">
	.sceenBtn {
		width: 228rpx;
		height: 64rpx;
		border-radius: 218rpx;
		border: 1rpx solid #999999;
		font-size: 32rpx;
		font-weight: 500;
		color: #999999;
		text-align: center;
		line-height: 64rpx;
	}

	.sceenBtnAfter {
		background: #FDCC45;
		border: 2rpx solid #FDCC45;
		color: #fff;
	}

	.sceenList {
		flex-wrap: wrap;
	}

	.sceenBtns {
		position: absolute;
		bottom: 100rpx;
		justify-content: space-around;
		width: 100%;
	}

	.iconBox {
		padding: 15rpx 24rpx;
		color: #9E9E9E;
		background: #F2F2F2;
		border-radius: 6rpx;
		display: flex;
		margin: 0 20rpx 20rpx;
		flex-shrink: 0;
	}

	.iconBoxAfter {
		background: #FDCC45;
		color: #FFFFFF;
	}

	.stateImg {
		width: 196rpx;
		height: 196rpx;
		margin: 62rpx 0 20rpx;
	}

	.statusImg {
		margin: 90rpx 0 50rpx;
	}

	.codeClose {
		width: 52rpx;
		height: 52rpx;
		margin-top: 50rpx;
	}

	.codeWX {
		width: 350rpx;
		height: 370rpx;
		margin: 20rpx 0;
	}

	.codeMessage {
		width: 430rpx;
		height: 480rpx;
		background: #FFF;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		font-weight: normal;
		color: #999999;
	}

	.noticeContent {
		view {
			margin-bottom: 28rpx;
			line-height: 40rpx;
		}
	}

	.textColor {
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 28rpx;
		font-variation-settings: "opsz" auto;
		color: #FD4545
	}

	.noticeContent {
		padding: 0 52rpx 0 48rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 28rpx;
		font-variation-settings: "opsz" auto;
	}

	.revocationTitle {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 48px;
		color: #353535;
		text-align: center;
	}

	.mask-close {
		line-height: 108rpx;
		font-size: 28rpx;
		color: #9E9E9E;
		width: 50%;
		text-align: center;
		height: 108rpx;
	}

	.mask-true {
		line-height: 108rpx;
		font-size: 28rpx;
		color: #FD4545;
		height: 1084rpx;
		border-left: 1rpx solid #EEEEEE;
		width: 50%;
		text-align: center;
		font-weight: bold;
		height: 108rpx;
	}

	.mask-btns {
		display: flex;
		justify-content: space-around;
		border-top: 1rpx solid #EEEEEE;
		height: 108rpx;
		line-height: 108rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		border-radius: 0 0 44rpx 44rpx;
	}

	/* 遮罩层 */
	.popup-mask {
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: 99;
		visibility: visible;
		opacity: 1;
	}

	.screenBox {
		width: 70vw;
		height: 100vh;
		background: rgba(255, 255, 255, 1);
		border-radius: 44rpx;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		padding-top: var(--status-bar-height);
	}

	.screenTitle {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		margin: 20rpx;
	}

	.notice {
		width: 564rpx;
		height: 752rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 44rpx;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 99;
	}

	.codeImgBox {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 99;
		width: 564rpx;
		height: 752rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.subSuccessBox {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		z-index: 99;
		width: 522rpx;
		height: 384rpx;
		background: #FFFFFF;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		line-height: normal;
		color: #333333;
	}

	/*  */
</style>